<%@ page language="java" contentType="text/html; charset=utf-8"  pageEncoding="utf-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<!-- 每天 -->
<s:set id="EVERYDAY" value="@org.projects.graduates.domain.RepeatType@EVERYDAY" />
<!-- 每周 -->
<s:set id="EVERYWEEK"value='@org.projects.graduates.domain.RepeatType@EVERYWEEK'/>
<!-- 每月 -->
<s:set id="EVERYMONTH"value='@org.projects.graduates.domain.RepeatType@EVERYMONTH'/>
<!-- 每年 -->
<s:set id="EVERYYEAR"value='@org.projects.graduates.domain.RepeatType@EVERYYEAR'/>
<!-- 每周工作日 -->
<s:set id="EVERYWORKINGDAYS"value='@org.projects.graduates.domain.RepeatType@EVERYWORKINGDAYS'/>
<!-- 周二，周四 -->
<s:set id="EVERYEVENDAYS"value='@org.projects.graduates.domain.RepeatType@EVERYEVENDAYS'/>
<!-- 周一，周三，周五-->
<s:set id="EVERYODDDAYS"value='@org.projects.graduates.domain.RepeatType@EVERYODDDAYS'/>

<!-- end Type  -->
<s:set id="NEVER" value="@org.projects.graduates.domain.RepeatEndType@NEVER" />
<s:set id="COUNT" value="@org.projects.graduates.domain.RepeatEndType@COUNT" />
<s:set id="DATE"  value="@org.projects.graduates.domain.RepeatEndType@DATE" />

<!-- repeat point -->
<s:set id="ONEWEEK" value='@org.projects.graduates.domain.RepeatPointType@ONEOFWEEK'/>
<s:set id="ONEMONTH" value='@org.projects.graduates.domain.RepeatPointType@ONEOFMONTH'/>


<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="ui/my97/skin/WdatePicker.css" />
<script type="text/javascript" src='ui/my97/WdatePicker.js'></script>
<script type="text/javascript" src='scripts/vendor/Moment.min.js'></script>
<script type="text/javascript" src='script/lang/zh-cn.js'></script>
<script type="text/javascript">

var repeat = {
		type        : {val : "EVERYDAY", txt : "天"},
		frequency 	: 1,
		repeatPoint :[],
		start 		: {},
		end   		: {type:'NEVER', count : 0, endDate : ''},
		getSummary 	: function(){
			var allPoint = "";
			var ke = repeat.frequency > 1 ? ("隔" + repeat.frequency) : "";
			var ed = getEndSummary(repeat.end);
			allPoint = getPointSummary(repeat) ;
			return "每" + ke + repeat.type.txt + " " + allPoint + "  " + ed;
		}
}

//jquery start
$(function(){
	iniFrequency();
	$('#frequency').change(function(){
		repeat.frequency = $('#frequency').val();
		update();
	});
	
	$('#startDate, #endDate').change(function(){
		var s = $.trim($('#startDate').val());
		repeat.start = s;
		var e = $.trim($('#endDate').val());
		if(e){
			if(s > e){
				$.messager.alert('Warning','开始时间不能大于结束时间');
			}
		}
	});
	
	//重复类型
	$('#types').change(function(){
		var tVal = $('#types').val();
		var tText = $("#types option[value='"+ tVal +"']").text();
		repeat.type.val = tVal;
		repeat.type.txt = tText.substring(1, tText.length);
		filt(repeat);
		update();
		
	});
	
	//开始时间部分
	$('#startDate').click(function(){
		WdatePicker();
	});
	
	//结束时间部分*******需要重构
	$("#rd_never").click(function(){
		$('#endCount').attr('disabled',true);
		$('#endDate').attr('disabled',true);
		$('#endCount').attr('value','');
		$('#endDate').attr('value','');
		repeat.end.type = $(this).val();
		update();
	});
	
	$("#rd_count").click(function(){
		$('#endCount').attr('disabled',false);
		$('#endDate').attr('disabled',true);
		$('#endDate').attr('value','');
		repeat.end.type = $(this).val();
		$('#endCount').focus();
	});
	
	$("#rd_date").click(function(){
		$('#endCount').attr('disabled',true);
		$('#endDate').attr('disabled',false);
		$('#endCount').attr('value','');
		repeat.end.type = $(this).val();
		$('#endDate').focus();
	});
	
	$('#endCount').change(function(){
		if($.isNumeric($(this).val())){
			repeat.end.count = $(this).val();
		}else{
			repeat.end.count = 30;
		}
		update();
	});
	$('#endDate').click(function(){
		WdatePicker({
			autoUpdateOnChanged:true,
			onpicked :function(){
			repeat.end.endDate = $('#endDate').val();
			update();
		}});
	});
	
	//一周的某天
	$('.che_week').change(function(){
		var che_group = $('.che_week');
		var len = $(che_group).length;
		repeat.repeatPoint = new Array();
		for(var i = 0; i < len; i++){
			if($(che_group[i]).is(':checked')){
				repeat.repeatPoint.push($(che_group[i]).val());
			}
		}
		update();
	});
	
	//月节点
	$("input[name='repeat.points']").click(function(){
		repeat.repeatPoint = new Array();
		repeat.repeatPoint.push($(this).val());
		update();
	});
	
	
	//页面初始化
	$("#rd_count").trigger('click');
	$('#types').trigger('change'); 
	$('#startDate').val(today());
	
	//提交表单
	$('#repeatForm').submit(function(){
	});
});//end jquery

//初始化频率
function iniFrequency(){
	for(var i = 1; i <= 30; i++){
		$('#frequency').append('<option value="'+i+'">'+i+'</option>');
	}
}

//不同类型的重复的过滤器
function filt(repeatBoo){
	weekFilt(repeatBoo);
	monthFilt(repeatBoo);
	frequencyFilt(repeatBoo);
}

function weekFilt(repeatBoo){
	if(repeatBoo.type.val == '<s:property value="%{#EVERYWEEK}"/>'){
		$("#frequencyGroup").after($("#repeatPointWeek"));
		$("#repeatPointWeek").show();
	}else{
		repeatBoo.repeatPoint = new Array();
		$("#repeatPointWeek").hide();
		$(".che_week").removeAttr("checked");
	}
}

function monthFilt(repeatBoo){
	if('<s:property value="%{#EVERYMONTH}"/>' == repeatBoo.type.val){
		$("#frequencyGroup").after($("#repeatPointMonth"));
		$("#repeatPointMonth").show();
		$('#rd_P_ONEOFWEEK').trigger('click');
	}else{
		repeatBoo.repeatPoint = new Array();
		$("#repeatPointMonth").hide();
	}
}


function frequencyFilt(repeatBoo){
	var tV = repeatBoo.type.val;
	//每周工作日的单双日
	if( '<s:property value="%{#EVERYEVENDAYS}"/>'  == tV
			|| '<s:property value="%{#EVERYODDDAYS}"/>'  == tV
			|| '<s:property value="%{#EVERYWORKINGDAYS}"/>'  == tV){
		$("#frequencyGroup").hide();
	}else{
		$("#frequencyGroup").show();
	}
}

//当页面的组件更改时，摘要也要更改
function update(){
	frequencyFilt(repeat);
	var summary = repeat.getSummary();
	$('#summary').val(summary);
	$('#summaryDiv').html(summary);
}

//重置频率
function resetFrequency(repeatBoo){
	repeatBoo.frequency = 1;
	$('#frequency').get(0).options[0].selected = true;
}

//得到结束节点的摘要的
function getEndSummary(end){
	var result = '';
	if(end.type == '<s:property value="%{#COUNT}"/>'){
		result =  ", " + end.count + "次";
	}else if(end.type == '<s:property value="%{#DATE}"/>'){
		result = ", " + "直到" + end.endDate;
	}
	return result;
}

function getPointSummary(repeatBoo){
	var result = '';
	if('<s:property value="%{#EVERYMONTH}"/>' == repeatBoo.type.val){
		result = getMonthPointSummary(repeatBoo);
	}else if('<s:property value="%{#EVERYWEEK}"/>' == repeatBoo.type.val ){
		result = getWeekPointSummary(repeatBoo);
	}
	return result;
}

//得到周节点的摘要
function getWeekPointSummary(repeatBoo){
	var result = '';
	if(repeatBoo.repeatPoint.length == 0){
		if(repeatBoo.type == '<s:property value="%{#EVERYWEEK}"/>'){
			result = '星期一 ';
			repeatBoo.repeatPoint.push("<s:property value='@org.projects.graduates.domain.RepeatPointType@MONDAY'/>");
		}
	}else{
		for(var  i = 0; i < repeatBoo.repeatPoint.length; i++){
			result += ('星期' + $('input[value="'+repeatBoo.repeatPoint[i]+'"] + .weekTxt').html() + " " )
		}
	}
	return result;
}
//得到月节点的摘要
function getMonthPointSummary(repeatBoo){
	var result = '';
	for(var x in repeatBoo.repeatPoint ){
		var m =  new moment($('#startDate').val());
		if(repeatBoo.repeatPoint[x] == '<s:property value="%{#ONEWEEK}"/>'){
			if(m.day()){
				result = '在第' + getNumOfWeek($('#startDate').val()) +'个星期  '+ moment.weekdays[m.day()];
			}
		}else{
			if(m.day()){
				result = '在第' + m.date() + '天 ';
			}
		}
	}
	return result;
}

function getNumOfWeek(date){
	var origin = new moment(date);
	var dd = new moment(date);
	dd.date(1);
	var week = 0;
	while(dd.date() <= origin.date()){
		if(dd.day() == origin.day()){
			week = week + 1;
		}
		dd.add('d', 1);
	}
	return week;
}

function today(){
	var now = moment();
	return now.format('YYYY-MM-DD');
}

</script>

<title>课程安排</title>
</head>
<body>
<div class="row ">
<div class="span8">
<form id="repeatForm" action="course/commit-arrangement.action" class="form-horizontal">
        <fieldset>
          <legend>课程时间安排</legend>
          <div class="control-group">
            <label class="control-label">重复</label>
            <div class="controls docs-input-sizes">
              <s:select id="types" listValue="getText(name())" name="repeat.type" list="types" theme="simple" />
            </div>
          </div>
          <div id="frequencyGroup" class="control-group">
            <label class="control-label">重复频率</label>
            <div class="controls docs-input-sizes">
            	<select id="frequency" class="span1" name="repeat.frequency"></select>
            </div>
          </div>
          <div class="control-group">
            <label for="prependedInput" class="control-label">开始时间</label>
            <div class="controls">
            	<input id="startDate" name="repeat.start" style="width:100px;"/>
            </div>
          </div>
          <div class="control-group">
            <label for="appendedInput" class="control-label">结束日期</label>
            <div id="endGroup" class="controls">
              <label class="radio">
                <input id="rd_count" name="repeat.end.type" value='<s:property value="%{#COUNT}" />'   class="rd_end" type="radio" />
                	发生<input id="endCount" class="span1" name="repeat.end.count" type="text" />次后
              </label>
              <label class="radio">
                <input id="rd_date" name="repeat.end.type" value='<s:property value="%{#DATE}" />'   class="rd_end"  type="radio"  />
                	在<input id="endDate" name="repeat.end.endDate"  style="width:100px;"/>
              </label>
            </div>
          </div>
          <div class="control-group">
            <label for="inlineCheckboxes" class="control-label"> 摘要</label>
            <div class="controls">
            	<div id="summaryDiv"></div>
            </div>
          </div>
          
          <div class="form-actions">
	          <input  name="courseId" value="${param.courseId }" type="hidden"/>
	          <input id="summary"  name="repeat.summary"  type="hidden" />
              <button class="btn btn-primary" type="submit">确定</button>
          </div>
        </fieldset>
      </form>
</div>

<div class="control-group" id="repeatPointWeek" style="display: none;">
            <label for="inlineCheckboxes" class="control-label">重复时间</label>
            <div class="controls">
              <label class="checkbox inline">
                <input id="mo" name="repeat.points" class="che_week" value="<s:property value='@org.projects.graduates.domain.RepeatPointType@MONDAY'/>" type="checkbox"><span class="weekTxt">一</span>
              </label>
               <label class="checkbox inline">
                <input id="tu" name="repeat.points" class="che_week"  value="<s:property value='@org.projects.graduates.domain.RepeatPointType@TUESDAY'/>" type="checkbox"><span class="weekTxt">二</span>
              </label>
               <label class="checkbox inline">
                <input id="we" name="repeat.points" class="che_week"  value="<s:property value='@org.projects.graduates.domain.RepeatPointType@WEDNESDAY'/>" type="checkbox"><span class="weekTxt">三</span>
              </label>
               <label class="checkbox inline">
                <input id="th" name="repeat.points" class="che_week"  value="<s:property value='@org.projects.graduates.domain.RepeatPointType@THURSDAY'/>" type="checkbox"><span class="weekTxt">四</span>
              </label>
               <label class="checkbox inline">
                <input id="fr" name="repeat.points" class="che_week"  value="<s:property value='@org.projects.graduates.domain.RepeatPointType@FRIDAY'/>" type="checkbox"><span class="weekTxt">五</span>
              </label>
               <label class="checkbox inline">
                <input id="sa" name="repeat.points" class="che_week"  value="<s:property value='@org.projects.graduates.domain.RepeatPointType@SATURDAY'/>" type="checkbox"><span class="weekTxt">六</span>
              </label>
               <label class="checkbox inline">
                <input id="su" name="repeat.points" class="che_week"  value="<s:property value='@org.projects.graduates.domain.RepeatPointType@SUNDAY'/>" type="checkbox"><span class="weekTxt">日</span>
              </label>
            </div>
</div>

<div class="control-group" id="repeatPointMonth" style="display: none;">
            <label for="inlineCheckboxes" class="control-label">重复日期</label>
            <div class="controls">
              <label class="radio inline">
              	<input id="rd_P_ONEOFWEEK" name="repeat.points" value="<s:property value='%{#ONEWEEK}'/>"  class="rd_point_week" type="radio"/>
              	一周中的某天
              </label>
              <label class="radio inline">
              	<input id="rd_P_ONEOFMONTH" name="repeat.points" value="<s:property value='%{#ONEMONTH}'/>"  class="rd_point_mon" type="radio"/>
              	一月的某天
              </label>
            </div>
</div>

</div>


</body>
</html>